<template>
  <div class="user-add-or-update">
    <el-drawer :title="this.rowData ? '公告详情' : '新增公告'" :visible.sync="drawer" custom-class="demo-drawer" direction="rtl" size="60%">
      <div class="demo-drawer__content">
        <div :style="cardHeightStyle" class="rightScrollNone">
          <el-form size="mini" :model="dataForm" :rules="rules" ref="vendorRuleForm">
            <el-row>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="标题" prop="title">
                  <el-input autocomplete="off" type="text" v-model="dataForm.title" :disabled="this.rowData ? true : false"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="所属小程序" prop="project__name">
                  <el-select v-model="dataForm.project__name" placeholder="请选择" style="width: 100%" :disabled="this.rowData ? true : false">
                    <el-option v-for="(item, index) in project" :key="index" :label="item.key" :value="item.value"></el-option>
                    <!-- <el-option label="下架" value="0"></el-option> -->
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="内容:" prop="content">
                  <el-input autocomplete="off" type="textarea" v-model="dataForm.content" class="textarea" :disabled="this.rowData ? true : false"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="demo-drawer__footer" v-if="!this.rowData">
          <el-button size="mini" @click="cancelForm">取 消</el-button>
          <el-button size="mini" :loading="loading" @click="dataFormSubmit" type="primary">确定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { noticeAdd, noticebase } from '@/api/wxapplet/index.js'
export default {
  data() {
    return {
      timeOutCount: 0,
      showNumInput: false,

      refNum: 0,
      dataForm: {
        id: '',
        project__name: '',
        project_id: '', // 用户名
        content: '', // 角色
        title: '',
      },
      project: [],
      rowData: null,
      //cityOptions: citys.options,
      formLabelWidth: '150px',
      loading: false,
      drawer: false,

      roleOptions: [],
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        project__name: [{ required: true, message: '所属小程序', trigger: 'blur' }],
        content: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
      },
    }
  },

  computed: {
    cardHeightStyle() {
      let documentClientHeight = document.body.clientHeight
      const height = documentClientHeight - 80 - 80
      return {
        height: height + 'px',
        'overflow-y': 'scroll',
        'padding-right': '20px;',
      }
    },
  },
  mounted() {
    noticebase({}).then((res) => {
      // 所属小程序
      this.project = res.data.project
    })
  },
  methods: {
    // 新增
    Add(params) {
      return noticeAdd(params)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('保存成功')
          }
        })
        .catch((res) => {
          this.$message.error('保存失败')
        })
    },
    //   提交
    dataFormSubmit() {
      this.$refs.vendorRuleForm.validate((flag) => {
        if (flag) {
          const data = this.dataForm
          data.project_id = data.project__name == '' || data.project__name == undefined ? data.project_id : data.project__name
          delete data.project__name

          if (!this.rowData) {
            const info = Object.assign(data)
            const formData = new FormData()
            for (let key in info) {
              formData.set(key, info[key])
            }

            var request = this.Add(formData)

            request
              .then((d) => {
                this.cancelForm()
                this.$emit('refreshList')
              })
              .catch((d) => {
                this.cancelForm()
              })
          }
        }
      })
    },
    //   关闭弹出层
    cancelForm() {
      this.cleanInfo()
      this.loading = false
      this.drawer = false
    },
    //   打开弹出层
    open(row, role) {
      if (this.drawer) {
        return
      }
      this.rowData = row || null
      this.drawer = true
      this.openHook()
    },
    clearData() {
      this.$refs.vendorRuleForm.resetFields()
    },
    cleanInfo() {
      clearTimeout(this.timeOutCount)
    },
    //   回显
    openHook() {
      this.$nextTick((a) => {
        this.showNumInput = false
        this.refNum = 60 * 5 + 1
        this.clearData(this.rowData)
        console.log(this.rowData)
        if (this.rowData) {
          // 修改
          for (let key in this.dataForm) {
            this.dataForm[key] = this.rowData[key]
          }
        } else {
          this.loading = false
        }
      })
    },
  },
}
</script>
<style lang="scss">
.user-add-or-update {
  .el-tag {
    position: relative;
    right: 5px;
    z-index: 1;
    height: 40px;
    line-height: 40px;
    border-radius: 0 5px 5px 0;
    padding-left: 15px;
  }

  .my-email {
    .el-input__inner {
      border-radius: 5px 0 0 5px;
    }
  }
}

/*

  */

.fileInput {
  padding-right: 0;
}
.textarea textarea {
  height: 370px;
  resize: none;
}
</style>
